<template>
    <div class="detailCom">
        <div class="title">
            <img src="@/assets/image/img2.png" />藏品基本信息
        </div>
        <div class="content">
            <div class="info-item" v-for="(item, index) in information" :key="index">
                <div class="line" v-for="(item2, index2) in item.object" :key="index2">
                    <div class="name">
                        {{ item2.text }}:
                    </div>
                    <div class="value">
                        {{ item2.value }}
                    </div>
                </div>
            </div>
            <div class="button">
                <el-button type="primary" size="mini" @click="printFn"><img src="@/assets/image/print.png" />打印</el-button>
                <el-button type="primary" size="mini" @click="lookFn"><img src="@/assets/image/print.png" />查看模型</el-button>
            </div>
        </div>
        <div class="title" v-if="info.image && info.image.length > 0">
            <img src="@/assets/image/img3.png" />图片
        </div>
        <div class="content" v-if="info.image && info.image.length > 0">
            <div class="img-item" v-for="(item, index) in info.image" :key="index">
                <img class="img" :src="item" @click="lookImg(item)" />
                <div class="bottom">
                    <el-button type="success" size="mini" @click="downloadFn(item)"><img
                            src="@/assets/image/dwon.png" />下载</el-button>
                    <el-button size="mini" @click="printFn(item)"><img src="@/assets/image/print2.png" />打印</el-button>
                </div>
            </div>
            <i></i>
            <i></i>
            <i></i>
        </div>
        <div class="title" v-if="info.audio_url">
            <img src="@/assets/image/img4.png" />音频
        </div>
        <div class="content audio" v-if="info.audio_url">
            <audio controls :src="info.audio_url" ref="audio">
            </audio>
            <el-button type="primary" size="mini" @click="downloadFn(info.audio_url)">
                <i class="el-icon-download"></i>下载</el-button>
        </div>
        <div class="title" v-if="info.video_url">
            <img src="@/assets/image/img5.png" />视频
        </div>
        <div class="content video" v-if="info.video_url">
            <video controls :src="info.video_url" style="width: 50%;"></video>
            <el-button type="primary" size="mini" @click="downloadFn(info.video_url)">
                <i class="el-icon-download"></i>下载</el-button>
        </div>
        <div class="title" v-if="info.audio_url">
            <img src="@/assets/image/img4.png" />附件
        </div>
        <div class="content" v-if="info.annex && info.annex.length > 0">
            <div class="img-item" style="width: 100%;text-align: left;padding: 20px 10px;"
                v-for="(item, index) in info.annex" :key="index">
                {{ item }}
                <div class="bottom">
                    <el-button type="success" size="mini" @click="downloadFn(item)"><img
                            src="@/assets/image/dwon.png" />下载</el-button>
                </div>
            </div>
            <i></i>
            <i></i>
            <i></i>
        </div>
        <div class="title">
            <img src="@/assets/image/img2.png" />相关推荐
        </div>
        <div class="content" v-if="list.length > 0">
            <div class="img-item" v-for="(item, index) in list" :key="index" @click="jumpPage(item)">
                <img class="img" :src="item.image" />
                <div class="bottom">
                    <div class="name">
                        {{ item.name }}
                    </div>
                </div>
            </div>
            <i></i>
            <i></i>
            <i></i>
        </div>
        <!-- 查看模型 -->
        <el-dialog title="3D模型" :visible.sync="model" width="1000px">
            <div ref="containerRef" v-if="model"></div>
        </el-dialog>
        <el-dialog title="打印" :visible.sync="model2" width="600px">
            <div ref="printArea" class="printArea">
                <div v-if="typeof printImg != 'string'">
                    <div class="print-line" v-for="(item, index) in information" :key="index">
                        <div class="line" v-for="(item2, index2) in item.object" :key="index2">
                            <div class="name">
                                {{ item2.text }}:
                            </div>
                            {{ item2.value }}
                        </div>
                    </div>
                </div>
                <div v-else>
                    <img :src="printImg" />
                </div>
            </div>
            <el-button @click="model2 = false">取消</el-button>
            <el-button type="primary" @click="print">
                <i class="el-icon-download"></i>打印
            </el-button>
        </el-dialog>
        <el-dialog title="图片" :visible.sync="model3" width="600px">
            <img style="width: 100%;" :src="modelImg" />
        </el-dialog>
    </div>
</template>

<script>
import * as THREE from 'three';
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js';
import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader.js';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import { STLLoader } from 'three/examples/jsm/loaders/STLLoader';
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js';

import { collectionInfo } from "@/api/object_detail";
export default {
    data() {
        return {
            id: 0,
            information: [{
                object: [{
                    text: '名称',
                    field: 'name',
                }, {
                    text: '原名称',
                    field: 'original_name',
                }, {
                    text: '所属博物馆',
                    field: 'store_name',
                }, {
                    text: '藏品总账号',
                    field: 'collection_sn',
                }, {
                    text: '时代',
                    field: 'dynasty_name',
                }, {
                    text: '质地',
                    field: 'texture_name',
                }, {
                    text: '分类',
                    field: 'cate_name',
                }]
            }, {
                object: [{
                    text: '来源',
                    field: 'from'
                }, {
                    text: '完残程度',
                    field: 'disability_range'
                }, {
                    text: '数量',
                    field: 'number'
                }, {
                    text: '尺寸',
                    field: 'size'
                }, {
                    text: '重量',
                    field: 'weight'
                }, {
                    text: '作者',
                    field: 'author'
                }]
            }, {
                object: [{
                    text: '通长',
                    field: 'length'
                }, {
                    text: '通宽',
                    field: 'width'
                }, {
                    text: '通高',
                    field: 'height'
                }, {
                    text: '入藏年度',
                    field: 'income_time_year'
                }]
            }],
            info: {},
            list: [],
            printImg: '',
            model3: false,
            model2: false,
            model: false,
            controls: null,
            renderer: null,
            scene: null,
            camera: null,
            stlMesh: null,
            origin: '',
            modelImg: ''
        }
    },
    created() {
        this.origin = window.location.origin
        this.id = this.$route.query.id
        this.collectionInfo()
    },
    methods: {
        collectionInfo() {
            collectionInfo({ id: this.id }).then(res => {
                console.log(res.data.info);
                this.info = res.data.info
                this.list = res.data.list
                for (let i in res.data.info) {
                    this.information.forEach(item => {
                        item.object.forEach(item2 => {
                            if (item2.field == i) {
                                this.$set(item2, 'value', res.data.info[i])
                            }
                        })
                    })
                }
            }).catch(e => {
                console.log(e);
            })
        },
        lookImg(url) {
            console.log(123, url);
            this.modelImg = url
            this.model3 = true
        },
        // 下载
        downloadFn(url) {
            window.open(url, '_black')
        },
        printFn(img) {
            this.printImg = img ? img : ''
            this.model2 = true
        },
        jumpPage(val) {
            document.documentElement.scrollTop = 0;
            this.id = val.id
            this.collectionInfo()
        },
        print() {
            this.$print(this.$refs.printArea);
        },
        lookFn() {
        this.model = true
            let info = {
                model_stl: this.info.stl_file,
                model_mtl: this.info.obj_mtl,
                model_obj: this.info.obj_low,
                model_image: this.info.obj_image,
                fbx_file: this.info.fbx_file,
                fbx_image: this.info.fbx_image
            }
            console.log('ooooooopppppppppppppppppp', info);
            setTimeout(() => {
                this.cabinet(info)
            }, 200)
        },
        cabinet(info) {
            // 创建场景
            this.scene = new THREE.Scene();

            // 创建相机
            this.camera = new THREE.PerspectiveCamera(20, 1.2, 1, 2000);
            this.camera.position.z = 405;
            // this.camera.position.set(100, -100, -100)

            // 创建渲染器
            this.renderer = new THREE.WebGLRenderer();
            this.renderer.setSize(960, window.innerHeight / 1.4);
            this.renderer.setClearColor('#2F2821', 1.0);
            this.$refs.containerRef.appendChild(this.renderer.domElement);
            if (info.model_stl) {

                // 加载模型和材质
                const stlLoader = new STLLoader()
                stlLoader.load(info.model_stl, (geometry) => {
                    const material = new THREE.MeshPhongMaterial({
                        color: '#f00',
                        side: THREE.DoubleSide,
                        specular: '#918b84',
                        shininess: 12
                    })
                    this.stlMesh = new THREE.Mesh(geometry, material)
                    this.stlMesh.rotation.set(0, -Math.PI / 2, 0);
                    this.stlMesh.scale.set(0.5, 0.5, 0.5);
                    this.stlMesh.castShadow = true;
                    this.stlMesh.receiveShadow = true;
                    this.scene.add(this.stlMesh)
                })
            } else if (info.model_mtl && info.model_obj) {
                // --------------------------------
                const mtlLoader = new MTLLoader();
                const objLoader = new OBJLoader();
                mtlLoader.load(info.model_mtl, (mtl) => {
                    mtl.preload();
                    objLoader.setMaterials(mtl);
                    objLoader.load(info.model_obj, (object) => {
                        object.traverse((child) => {
                            const textureLoader = new THREE.TextureLoader().load(info.model_image)
                            child.material = new THREE.MeshBasicMaterial({ map: textureLoader });
                        });
                        this.scene.add(object);
                    });
                });
            } else if (info.fbx_file) {
                const fbxloader = new FBXLoader()
                fbxloader.load(info.fbx_file, (fbx) => {
                    fbx.traverse((child) => {
                        const textureLoader = new THREE.TextureLoader().load(info.fbx_image)
                        child.material = new THREE.MeshBasicMaterial({ map: textureLoader });
                    });
                    this.scene.add(fbx);
                })
            } else {
                this.model = false
                this.$message.error('暂无模型信息');
            }

            // 创建控制器
            this.controls = new OrbitControls(this.camera, this.renderer.domElement);
            // 设置控制器的相关属性
            this.controls.enableDamping = true; // 启用阻尼效果，使相机运动更平滑
            this.controls.dampingFactor = 0.05; // 阻尼系数，调整阻尼效果的强度
            this.controls.rotateSpeed = 0.5; // 控制旋转的速度
            this.controls.zoomSpeed = 1.2; // 控制缩放的速度
            this.controls.panSpeed = 0.8; // 控制平移的速度
            // 设置控制器的目标点（可选）
            this.controls.target.set(0, 8, 0); // 设置相机的焦点位置
            // 禁用控制器的自动旋转（可选）
            this.controls.autoRotate = false;
            // 更新控制器
            this.controls.update();

            // 添加平行光
            const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
            directionalLight.position.set(1, 1, 1);
            this.scene.add(directionalLight);

            // 渲染场景
            this.animate();
        },
        animate() {
            requestAnimationFrame(this.animate);
            // cube.rotation.x += 0.01;
            // cube.rotation.y += 0.01;
            this.controls.update();
            this.renderer.render(this.scene, this.camera);
        }
    }
}
</script>

<style lang="scss" scoped>
.detailCom {
    width: 1000px;
    margin: 0 auto;
    padding: 20px 0;

    .title {
        font-size: 24px;
        font-family: PingFang SC-Semibold, PingFang SC;
        font-weight: 600;
        color: #683C19;
        text-align: left;
        margin: 10px 0;
        display: flex;
        align-items: center;

        img {
            margin-right: 20px;
        }
    }

    .content {
        padding: 20px;
        background: #fff;
        border-radius: 18px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        .info-item,
        .button {
            width: 23%;
        }

        .info-item {
            background: #FAF4EA;
            border-radius: 18px;
            padding: 20px 0;

            .line {
                display: flex;
                justify-content: space-between;
                font-size: 18px;
                font-family: PingFang SC-Regular, PingFang SC;
                font-weight: 400;
                color: #683C19;
                margin: 10px 0;

                .name {
                    width: 90px;
                    text-align: right;
                }

                .value {
                    text-align: left;
                    word-wrap: break-word;
                    width: calc(100% - 100px);
                }
            }
        }

        i {
            width: 19%;
        }

        .img-item {
            border: 1px solid #CFCFCF;
            border-radius: 18px;
            width: 19%;
            margin-bottom: 10px;
            cursor: pointer;

            .img {
                width: 100%;
                height: 180px;
            }

            .bottom {
                padding: 10px;
                display: flex;
                justify-content: space-between;

                .name {
                    font-size: 20px;
                    font-family: PingFang SC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #683C19;
                }
            }
        }

        ::v-deep .el-button {
            span {
                display: flex;
                align-items: center;

                img {
                    margin-right: 10px;
                }
            }
        }
    }

    .printArea {
        img {
            width: 100%;
        }

        .print-line {
            .line {
                .name {
                    width: 120px;
                }
            }
        }
    }

    .audio {
        align-items: center;
    }

    .video {
        align-items: flex-end;
    }

    .audio,
    .video {
        justify-content: center;

        video {
            border-radius: 18px;
        }

        .el-button {
            margin-left: 10px;
            padding: 10px 20px !important;
            border-radius: 60px !important;
        }
    }

    .print-line {
        .line {
            display: flex;
            font-size: 18px;
            font-family: PingFang SC-Regular, PingFang SC;
            font-weight: 400;
            color: #683C19;
            margin: 10px 0;
            text-align: left;

            .name {
                width: 90px;
                text-align: right;
                font-size: 18px;
                font-family: PingFang SC-Regular, PingFang SC;
                font-weight: 400;
                color: #683C19;
                margin-right: 10px;
            }
        }
    }
}
</style>